<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			var userList = [{
					name: "林俊杰",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: undefined
				},
				{
					name: "邓紫棋",
					age: 21,
					grade: "20224129",
					sex: 1,
					hobby: null
				},
				{
					name: "刘德华",
					age: 20,
					grade: "20224128",
					sex: 0,
					hobby: ["演唱会", "拍电影"]
				},
				{
					name: "Beyond",
					age: 26,
					grade: "20224128",
					sex: 0,
					hobby: []
				},
				{
					name: "杨幂",
					age: 20,
					grade: "20224129",
					sex: 1,
					hobby: ["追剧"]
				},
				{
					name: "周杰伦",
					age: 21,
					grade: "20224128",
					sex: 0,
					hobby: ["唱歌", "mojito"]
				},
				{
					name: "kunkun",
					age: 19,
					grade: "20224129",
					sex: 0,
					hobby: ["唱", "跳", "rap", "篮球"]
				}
			]
			function init() {
				var tbody = document.getElementsByTagName('tbody')[0]
				// 遍历userList，为每一个元素创建一个tr对象，追加到tbody中
				for (var i = 0; i < userList.length; i++) {
					var user = userList[i]
					var new_tr = document.createElement('tr')
					// 增加姓名单元格
					var new_td = document.createElement('td')
					new_td.innerText = user.name
					new_tr.appendChild(new_td)
					// 处理年龄
					new_td = document.createElement('td')
					new_td.innerText = user.age
					new_tr.appendChild(new_td)
					// 处理班级
					new_td = document.createElement('td')
					new_td.innerText = user.grade
					new_tr.appendChild(new_td)
					// 处理性别
					new_td = document.createElement('td')
					new_td.innerText = user.sex === 0 ? '男' : '女'
					new_tr.appendChild(new_td)
					// 处理爱好
					new_td = document.createElement('td')
					new_td.innerText = hobbyToStr(user.hobby)
					new_tr.appendChild(new_td)
					// 增加删除按钮
					new_td = document.createElement('td')
					new_td.innerHTML = 
					"<button onclick='delTr(" + i + ")'>删除</button>"
					new_tr.appendChild(new_td)
					
					// 把new_tr追加到body
					new_tr.id = i // 将数组索引作为tr的id
					
					// // 选择一个class
					// // 如果i是0，是数组的第一个元素，实际表格中是第二行
					// if (i % 2 === 0) {
					// 	new_tr.className = 'tr-1'
					// } else {
					// 	new_tr.className = 'tr-0'
					// }
					tbody.appendChild(new_tr)
				}
				// 重新调整奇偶行
				changStyle()
			}
			
			function hobbyToStr(obj) {
				if (obj == null || obj == undefined) {
					return ''
				}
				// Obj就是数组
				// 必须设定为字符串
				var str = ''
				for(var i = 0; i < obj.length; i ++) {
					str += obj[i]
					if (i < obj.length - 1) {
						str += ','
					}
				}
				return str
			}
			
			// 删除表格行
			function delTr(id) {
				var tr = document.getElementById(id)
				tr.remove()
				changStyle()
			}
			
			// 重新调整表格奇偶行
			function changStyle() {
				var trs = document.getElementsByTagName('tr')
				for (var i = 1; i < trs.length; i++) {
					var tr = trs[i]
					if (i % 2 === 0) {
						tr.className = 'tr-1' // 数据偶数行
					} else {
						tr.className = 'tr-0' // 数据奇数行
					}
				}
			}
		</script>
		<style>
			table {
				border: 1px solid red;
			}
			th,td {
				border: 1px solid red;
				width: 200px;
				text-align: center;
			}
			thead {
				background-color: chocolate;
			}
			/* 奇数行背景 */
			.tr-0 {
				background-color: aquamarine;
			}
			/* 偶数行背景 */
			.tr-1 {
				background-color: coral;
			}
		</style>
	</head>
	<body>
		<table cellspacing='0'>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
					<th>性别</th>
					<th>爱好</th>
					<th class="op_td">操作</th>
				</tr>
			</thead>
			<tbody>
				<tr id='demo' class="tr-0">
					<td>张三</td>
					<td>20</td>
					<td>20224128</td>
					<td>男</td>
					<td>写代码</td>
					<td><button onclick="delTr('demo')">删除</button></td>
				</tr>
			</tbody>
		</table>
	</body>
	<script>
		// 保证代码在html渲染完成之后再运行
		init()
	</script>
</html>